<template>
	<view class="content">

		<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true" >

			<el-tab-pane class="title1" label="我的数据" name="first" style="text-align: center;width: 500px;">
				
				<el-table :data="tableData" style="border-radius: 4px;text-align: center; border: 1px solid rgb(222, 222, 222);margin-bottom: 20">
					
					<el-table-column prop="date" label="数据统计" width="140" stype="text-align: center;">
						
						<div class="list">
							<ol style="text-align: center;">{{tableData3.allSale}}</ol>
							<ol style="text-align: center;">总销售额</ol>
							<ol style="text-align: center;">{{tableData3.myAllSale}}</ol>
							<ol style="text-align: center;">我的销售额</ol>
						</div>
					</el-table-column>
					<el-table-column prop="name" label="  " width="150">
						<div class="list">
							<ol style="text-align: center;">{{tableData3.newCust}}</ol>
							<ol style="text-align: center;">新增客户</ol>
							<ol style="text-align: center;">{{tableData3.myNewCust}}</ol>
							<ol style="text-align: center;">我的新增客户</ol>
						</div>
					</el-table-column>
					<el-table-column prop="datatime" label="    " width="160" >
						
						<div class="list">
							<ol style="text-align: center;">{{tableData3.newContract}}</ol>
							<ol style="text-align: center;">合同签订量</ol>
							<ol style="text-align: center;">{{tableData3.myNewContract}}</ol>
							<ol style="text-align: center;">我的合同签订量</ol>
						</div>
					</el-table-column>
				</el-table>
			
				<el-table :data="tableData2" stripe style="border-radius: 4px;margin: auto; border: 1px solid rgb(222, 222, 222);">
					<el-table-column prop="" label="近期跟进" width="250">
						<div slot-scope="scope">
							<ol style="text-align: center;margin-bottom: 5px;">公司：{{scope.row.company}}</ol>
							<ol style="text-align: center;">跟进记录：{{scope.row.followLog}}</ol>
						</div>
					</el-table-column>
					<el-table-column prop="" label="  " width="250" >
						<div slot-scope="scope">
						<ol button="拜访" style="color: white;text-align: center;width:60px;background-color: darkgrey;margin:auto;padding: 0;margin-bottom: 5px;">{{scope.row.followWay}}</ol>
						<ol style="text-align: center;padding: 0;">{{scope.row.time}}</ol>
						</div>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane class="title2" label="数据看板" name="second" style="width: 500px;text-align: center;">
				<view style="color: black;margin: 20px;">销售趋势</view>
				<view  id="main1" style="height: 370px;"></view>
				<view style="color: black;margin: 20px;">客户来源</view>
				<view id="main2" style="height: 370px;"></view>
				<view style="color: black;margin: 20px;">跟进状态</view>
				<view id="main3" style="height: 330px;"></view>
				<view style="color: black;margin: 20px;">销售排行</view>
				<view id="main" style="height: 370px;"></view>
			</el-tab-pane>
			<el-tab-pane class="title3"  label="待办中心" name="third" style="width: 500px;text-align: center;" disabled>3</el-tab-pane>
		</el-tabs>

		</el-table>

		<div class="line"></div>
		<view class="text-area">
		</view>
	</view>
</template>

<script>
	 import * as echarts from 'echarts';
	export default {
		onLoad() {
			this.userId=uni.getStorageSync('id')
			uni.request({
				url:'http://localhost:8089/crmdemo/contract/queryData',
				data:{
					userId:this.userId
				},
				success: (res) => {
					
					this.tableData3 = res.data.result;
			
				}
			});
			uni.request({
				url:'http://localhost:8089/crmdemo/followinfo/queryFollowinfo',
				data:{
					userId:this.userId
				},
				success: (res) => {
					
					this.tableData2 = res.data.result;
			
				}
			});
		},
		data() {
			return {
				userId:'',
				activeName: 'second',
				activeIndex: '1',
				activeIndex2: '1',
				selected: '本月',
				tableData3:[],
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}],
				tableData2: []
			};
		},

		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}

		},
		mounted() {
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
			  xAxis: {
			    type: 'category',
			    data: ['admin', 'ldh', 'hcw', 'root', 'wyz', 'cjy', 'zxc']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      data: [2707031, 553741,509000,474970, 309000, 259000, 109000],
			      type: 'bar',
			      showBackground: true,
			      backgroundStyle: {
			        color: 'rgba(180, 180, 180, 0.2)'
			      }
			    }
			  ]
			}
			option && myChart.setOption(option)
			
			
			var chartDom1 = document.getElementById('main1');
			var myChart1 = echarts.init(chartDom1);
			var option1;
			option1 = {
			  title: {
			    text: ''
			  },
			  tooltip: {
			    trigger: 'axis'
			  },
			  legend: {
			    data: ['销售额', '回款金额']
			  },
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
			    containLabel: true
			  },
			  toolbox: {
			    feature: {
			      saveAsImage: {}
			    }
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月','11月', '12月']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      name: '销售额',
			      type: 'line',
			      stack: 'Total',
			      data: [303000, 553741, 303000, 88000, 0,202011, 294082, 300020,180888,0,909000,602000]
			    },
			    {
			      name: '回款金额',
			      type: 'line',
			      stack: 'Total',
			      data: [30300, 29200, 30300, 44000, 0,23000, 294082, 23945,12000,0,30204,602000]
			    }
			  ]
			}	
			option1 && myChart1.setOption(option1)
			
			
			var chartDom2 = document.getElementById('main2');
			var myChart2 = echarts.init(chartDom2);
			var option2;
			setTimeout(function () {
			  option2 = {
			    legend: {},
			    tooltip: {
			      trigger: 'axis',
			      showContent: false
			    },
			    dataset: {
			      source: [
			       ['年份', '2018', '2019', '2020', '2021', '2022', '2023'],
			       ['电话介绍', 15, 18, 7, 11, 15, 32],
			       ['线下宣传', 11, 4, 5, 13, 17, 35],
			       ['转介绍', 14, 6, 16, 14, 14, 36],
			       	
			       ['网络宣传', 2, 12, 1, 16, 9, 29]
			      ]
			    },
			    xAxis: { type: 'category' },
			    yAxis: { gridIndex: 0 },
			    grid: { top: '55%' },
			    series: [
			      {
			        type: 'line',
			        smooth: true,
			        seriesLayoutBy: 'row',
			        emphasis: { focus: 'series' }
			      },
			      {
			        type: 'line',
			        smooth: true,
			        seriesLayoutBy: 'row',
			        emphasis: { focus: 'series' }
			      },
			      {
			        type: 'line',
			        smooth: true,
			        seriesLayoutBy: 'row',
			        emphasis: { focus: 'series' }
			      },
			      {
			        type: 'line',
			        smooth: true,
			        seriesLayoutBy: 'row',
			        emphasis: { focus: 'series' }
			      },
				  {
				    type: 'line',
				    smooth: true,
				    seriesLayoutBy: 'row',
				    emphasis: { focus: 'series' }
				  },
			      {
			        type: 'pie',
			        id: 'pie',
			        radius: '30%',
			        center: ['50%', '25%'],
			        emphasis: {
			          focus: 'self'
			        },
			        label: {
			          formatter: '{b}: {@2023} ({d}%)'
			        },
			        encode: {
			          itemName: 'product',
			          value: '2023',
			          tooltip: '2023'
			        }
			      }
			    ]
			  };
			  myChart2.on('updateAxisPointer', function (event) {
			    const xAxisInfo = event.axesInfo[0];
			    if (xAxisInfo) {
			      const dimension = xAxisInfo.value + 1;
			      myChart.setOption({
			        series: {
			          id: 'pie',
			          label: {
			            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
			          },
			          encode: {
			            value: dimension,
			            tooltip: dimension
			          }
			        }
			      });
			    }
			  });
			  myChart2.setOption(option2);
			})
			option2 && myChart2.setOption(option2)
			
			var chartDom3 = document.getElementById('main3');
				var myChart3 = echarts.init(chartDom3);
				var option3;
				option3 = {
			  tooltip: {
			    trigger: 'item'
			  },
			  legend: {
			    top: '5%',
			    left: 'center'
			  },
			  series: [
			    {
			      name: 'Access From',
			      type: 'pie',
			      radius: ['40%', '70%'],
			      avoidLabelOverlap: false,
			      itemStyle: {
			        borderRadius: 10,
			        borderColor: '#fff',
			        borderWidth: 2
			      },
			      label: {
			        show: false,
			        position: 'center'
			      },
			      emphasis: {
			        label: {
			          show: true,
			          fontSize: 40,
			          fontWeight: 'bold'
			        }
			      },
			      labelLine: {
			        show: false
			      },
			      data: [
			        { value: 45, name: '方案报价' },
			        { value: 39, name: '合同签订' },
			        { value: 48, name: '初次沟通' }
			    
			      ]
			    }
			  ]
			}
				option3 && myChart3.setOption(option3)
			
			
		},
	}
</script>

<style>
	page {
	  background-color: white;
	}
	.content {
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		margin-left: auto;
		margin-right: auto;
	}

	.title1 {
		font-size: 36rpx;
		color: #8f8f94;
		margin-left: auto;
		margin-right: auto;
	}

	.title2 {
		font-size: 36rpx;
		color: #8f8f94;
		margin-left: auto;
		margin-right: auto;
	}

	.title3 {
		font-size: 36rpx;
		color: #8f8f94;
		margin-left: auto;
		margin-right: auto;
	}

	.property {
		text-align: center;
	}

	.lsit {
		text-align: center;
	}

	.select-box {
		position: absolute;
		top: 0;
		left: 3;
		right: 0;
		bottom: -1;
		background-color: grey;
	}
</style>